// tab切换
$("#nav a").click(function () {
  var index = $(this).index();
  $(this).css("background", "yellow").siblings().css("background", "")
  $("#content>div").eq(index).show().siblings().hide();
})

// 调用添加接口
$("#addBtn").click(function () {

  $.ajax({
    url: "http://127.0.0.1:3000/add",
    type: "post",
    data: {
      pname: $("#pname").val(),
      price: $("#price").val(),
      sel: $("#sel").val()
    },
    success: function (res) {
      console.log(res)
      alert("添加成功")
      $("#pname").val("")
      $("#price").val("")
      $("#sel").val("")
      show()
    }
  })
})
// 渲染页面
function show (sel) {
  $.ajax({
    url: "http://127.0.0.1:3000/all",
    type: "post",
    data: {
      sel: sel
    },
    success: function (res) {
      if (!sel) {
        // 整理返回数据中分类 并去重   -------------
        var selArr = [];
        res.forEach(function (element, index) {
          selArr.push(element.sel)
        })
        console.log(selArr)
        var arr = new Set(selArr);//数组去重
        console.log(arr)
        var btnStr = `<button class="active">全部</button>`
        arr.forEach(function (ele, index) {
          btnStr += `<button>${ele}</button>`
        })
        $(".btn_list").html(btnStr)
      }
      // -----------------------------------------------------
      var str = ``;
      $.each(res, function (index, ele) {
        var date = formattar(ele.date)  //整理时间格式的函数
        str += ` <tr>
              <td>${index + 1}</td>
              <td>${ele.pname}</td>
              <td>￥${Number(ele.price).toFixed(2)}</td>
              <td>${ele.sel}</td>
              <td>
              <button  class="${ele.inventory <= 0 ? 'Dis' : ''}" onclick="minAndPlus('${ele._id}','min',this)">-</button>
              <span  class="${ele.inventory <= 0 ? 'Dis' : ''}">${ele.inventory}</span>
              <button onclick="minAndPlus('${ele._id}','plus',this)">+</button></td>
              <td>${date}</td>
              <td>
                <a href="#" onclick="del('${ele._id}')">删除</a>
              </td>
            </tr>`
      })
      $("#mybody").html(str)

    }
  })
}
show();
var sel = "" //分类
// 点击分类 发送分类名称 到渲染接口  
$(".btn_list").on("click", "button", function () {
  $(this).addClass("active").siblings().removeClass("active");
  sel = $(this).html()
  show(sel)
})

// 整理时间格式的函数
function formattar (time) {
  var date = new Date(time);
  var y = date.getFullYear();
  var m = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  var d = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  var min = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  var s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  return `${y}-${m}-${d}  ${h}:${min}:${s}`
}
// 删除----------------------------------
function del (id) {
  $.ajax({
    url: "http://127.0.0.1:3000/del",
    type: "post",
    data: {
      id: id
    },
    success: function (res) {
      show(sel);
    }
  })
}
// 修改库存
function minAndPlus (id, status, that) {
  var inventory = 0;
  if (status == "min") {
    inventory = ($(that).next().html())
    inventory--
    if (inventory <= 0) {
      // 删除商品
      $(that).hide();
      $(that).next().hide();
    }
  }
  if (status == "plus") {
    console.log($(that).prev())
    inventory = Number($(that).prev().html());
    inventory++
  }

  console.log(inventory)
  $.ajax({
    url: "http://127.0.0.1:3000/upInventory",
    type: "post",
    data: {
      id: id,
      inventory: inventory
    },
    success: function (res) {
      show(sel)
    }
  })
}